<template>
    <el-row>
        <el-col :span="24">
            <div class="grid-content ep-bg-purple-dark" />
            <el-card>
                <el-button type="success" style="margin-bottom:10px;" @click="showAddDialog">添加</el-button>
                <el-table :data="projectList" border style="width: 100%">
                    <el-table-column prop="tid" label="ID" width="50px" />
                    <el-table-column prop="tname" label="维修事件名" />
                    <el-table-column prop="location" label="维修地址" />

                    <el-table-column prop="rstart" label="维修开始时间" />
                    <el-table-column prop="rend" label="维修结束时间" />
                    <el-table-column prop="rstate" label="维修进度" width="100px">
                        <template #default="scope">
                            <el-tag v-if="scope.row.rstate == 1">已修缮</el-tag>
                            <el-tag type="info" v-else>未处理</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-popover placement="right" :width="400" trigger="hover">
                                <template #reference>
                                    <el-button size="small" type="success"
                                        @click="showSetEmployeeDialog(scope.row.tid)">分配员工</el-button>
                                </template>
                                <el-table :data="scope.row.emps">
                                    <el-table-column width="100" property="rname" label="员工姓名" />
                                    <el-table-column width="300" property="rphone" label="员工电话" />
                                    <el-table-column width="300" property="department.dname" label="员工部门" />
                                </el-table>
                            </el-popover>
                                <el-button size="small" type="primary"@click="selectByTid(scope.row.tid)">修改</el-button>
                            <el-popconfirm title="你确定已经完成修缮嘛" confirm-button-text="确认" cancel-button-text="取消"
                            @confirm="deleteBytid(scope.row.tid)">
                                <template #reference>
                                    <el-button size="small" type="success" plain>修缮</el-button>
                            </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-col>
    </el-row>
    <!--添加业主的对话框开始-->
    <el-dialog v-model="addDialogshow" title=" 添加事件" width="700px">
        <el-form>
            <el-form-item label="维修事件名" label-width="20%">
                <el-input v-model="RepairTaskAdd.tname" vautocomplete="off" />
            </el-form-item>
            <el-form-item label="维修地址" label-width="20%">
                <el-input v-model="RepairTaskAdd.location" vautocomplete="off" />
            </el-form-item>
            <el-form-item label="维修开始时间" label-width="20%">
                <el-date-picker v-model="RepairTaskAdd.rstart" type="date" placeholder="请选择维修开始日期"
                    format="YYYY-MM-DD" style="width: 300px" value-fornat="YYYY-MM-DD" />
            </el-form-item>
            <el-form-item label="维修预计结束时间" label-width="20%">
                <el-date-picker v-model="RepairTaskAdd.rend" type="date" placeholder="请选择维修预计结束日期"
                    format="YYYY-MM-DD" style="width: 300px" value-fornat="YYYY-MM-DD" />
            </el-form-item>
            <!-- <el-form-item label="项目进度" label-width="20%">
                <template #default="scope">
                    <el-tag v-if="scope.row.rstate == 1">未分配</el-tag>
                    <el-tag type="info" v-else>已修缮</el-tag>
                </template>
            </el-form-item> -->
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addDialogshow = false">取消</el-button>
                <el-button type="primary" @click="insert">确认</el-button>
            </div>
        </template>
    </el-dialog>
    <!--添加业主的对话框结束-->
     <!--修改业主的对话框开始-->
     <el-dialog v-model="updateDialogShow" title=" 修改事件" width="700px">
        <el-form>
            <el-form-item label="维修事件名" label-width="20%">
                <el-input v-model="RepairTaskUpdate.tname" vautocomplete="off" />
            </el-form-item>
            <el-form-item label="维修地址" label-width="20%">
                <el-input v-model="RepairTaskUpdate.location" vautocomplete="off" />
            </el-form-item>
            <el-form-item label="维修开始时间" label-width="20%">
                <el-date-picker v-model="RepairTaskUpdate.rstart" type="date" placeholder="请选择维修开始日期"
                    format="YYYY-MM-DD" style="width: 300px" value-fornat="YYYY-MM-DD" />
            </el-form-item>
            <el-form-item label="维修结束时间" label-width="20%">
                <el-date-picker v-model="RepairTaskUpdate.rend" type="date" placeholder="请选择维修结束日期"
                    format="YYYY-MM-DD" style="width: 300px" value-fornat="YYYY-MM-DD" />
            </el-form-item>
            <!-- <el-form-item label="项目进度" label-width="20%">
                <template #default="scope">
                    <el-tag v-if="scope.row.rstate == 1">未分配</el-tag>
                    <el-tag type="info" v-else>已修缮</el-tag>
                </template>
            </el-form-item> -->
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="updateDialogShow = false">取消</el-button>
                <el-button type="primary" @click="update">确认</el-button>
            </div>
        </template>
    </el-dialog>
    <!--修改业主的对话框结束-->
    <!--分配员工的对话框开始-->
    <el-dialog v-model="setEmployeeDialogShow" title=" 分配员工">
        <el-transfer v-model="selectedRids" :data="allEmployee" />
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="setEmployeeDialogShow = false">取消</el-button>
                <el-button type="primary" @click="insertTidAndRid">确认</el-button>
            </div>
        </template>
    </el-dialog>
    <!--分配员工的对话框结束-->



</template>
<script setup>
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { ElLoading } from 'element-plus'
import RepairTaskApi from '@/api/RepairTaskApi';
//查询所有项目的数组
const projectList = ref([]);
//展示在职员工的对话框
const setEmployeeDialogShow = ref(false);
//所有员工的信息 key label
const allEmployee = ref([]);
//被选中的员工的rid
const selectedRids = ref([]);
//需要分配员工的项目id
const selectedTid = ref(0);
//添加对话框是否显示状态
const addDialogshow = ref(false);
//显示添加
function showAddDialog() {
    addDialogshow.value = true;
}
//被添加部门的信息
const RepairTaskAdd = ref({
    tname: '',
    location: '',
    rstart: '',
    rend: '',
    rstate: '1'
});
//修改对话框是否显示状态
const updateDialogShow = ref(false);
//被修改员工的信息
const RepairTaskUpdate = ref({
    tid: '',
    tname: '',
    location: '',
    rstart: '',
    rend: '',
    rstate: ''
});
//定义方法完成部门添加
function insert() {
    const loading = ElLoading.service({
        lock: true,
        text: '加载中~~~',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    RepairTaskApi.insert(RepairTaskAdd.value)
        .then(resp => {
            loading.close();
            if (resp.code == 10000) {
                //弹出消息
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1200
                });
                //隐藏对话框
                addDialogshow.value = false;
                //清空对话框的数据
                RepairTaskAdd.value = {
                    tname: '',
                    location: '',
                    rstart: '',
                    rend: '',
                    rstate: ''
                }
                selectAll();
            } else {
                //弹出消息
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 2000
                });
            }
        });
}
//定义方法实现部门修改
function update() {
    const loading = ElLoading.service({
        lock: true,
        text: '加载中~~~',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    RepairTaskApi.update(RepairTaskUpdate.value)
        .then(resp => {
            loading.close();
            if (resp.code == 10000) {
                //弹出消息
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1200
                });
                updateDialogShow.value = false;
                selectAll();
            } else {
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 2000
                });
            }
        });
}
//定义方法根据id查询部门的信息
function selectByTid(tid) {
    RepairTaskApi.selectByTid(tid)
        .then(resp => {
            RepairTaskUpdate.value = resp.data;
            //显示修改对话框
            updateDialogShow.value = true;
        })
}
function deleteBytid(tid) {
    const loading = ElLoading.service({
        lock: true,
        text: '加载中~~~',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    RepairTaskApi.delete(tid)
        .then(resp => {
            loading.close();
            if (resp.code == 10000) {
                //弹出消息
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1200
                })
                //刷新表格
                selectAll();
            } else {
                //弹出消息
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 2000
                });
            }
        });
}
//查询所有在职员工信息并显示分配员工对话框
function showSetEmployeeDialog(tid) {
    RepairTaskApi.allEmployee(tid)
        .then(resp => {
            allEmployee.value = resp.data.allEmployee;
            selectedRids.value = resp.data.selectedRids;
            selectedTid.value = tid;
            setEmployeeDialogShow.value = true;
        })
}
//查询所有项目信息
function selectAll() {
    RepairTaskApi.selectAll()
        .then(resp => {
            projectList.value = resp.data;
        });
}
//分配员工
function insertTidAndRid() {
    RepairTaskApi.insertTidAndRid(selectedTid.value, selectedRids.value)
        .then(resp => {
            ElMessage.success(resp.msg);
            setEmployeeDialogShow.value = false;
            selectAll();
        });
}
selectAll();
</script>
<style scoped></style>